<template>
  <view class="result-container">
    <z-paging ref="paging" v-model="dataList" @query="queryList">
      <view class="search" style="background-color: #fff;">
        <u-search placeholder="请输入你想搜索的内容" :showAction="false" style="width: 720rpx;margin: 0 auto;" v-model="keywords"
          @search="handleSubmit"></u-search>
      </view>
      <filter-search wr-class="filter-container" @change="handleFilterChange" :sorts="sorts" :overall="overall" />
      <view class="category-goods-list">
        <block v-for="(item, index) in dataList" :key="index">
          <view class="goods-card"
            @click="$goPath(2, `/pages/premiumBag/goods/goodsDetail?productId=${item.id}&type=${type}`)">
            <view class="goods-card__main">
              <view class="goods-card__thumb">
                <image class="goods-card__img" :src="item.thumbnail" mode="aspectFill" lazy-load />
              </view>
              <view class="goods-card__body">
                <view class="goods-card__upper">
                  <view class="goods-card__title">
                    {{ item.name }}
                  </view>
                </view>
                <view class="goods-card__down">
                  <view>￥<text>{{ item.showPrice ? item.showPrice : 0.00 }}</text></view>
                  <block v-if="type == 1">
                    <view class="icon" @click.stop="onCollect(item)">
                      <u-icon :name="item.collect == 1 ? 'heart-fill' : 'heart'" size="40rpx"
                        :color="item.collect == 1 ? '#EA5F5F' : '#BFBFBF'" />
                    </view>
                  </block>
                  <block v-else>
                    <view class="goods-card__down_icon" @click.stop="onShopVisibleShow(item)">
                      <u-icon name="/static/icon/shoppingCart.png" size="30rpx" />
                    </view>
                  </block>
                </view>
              </view>
            </view>
          </view>
        </block>
      </view>
    </z-paging>

    <u-popup :show="shopVisible" @close="shopVisible = false">
      <view class="popup-block">
        <view class="popup-header">
          <u-icon icon="close" size="50rpx" color="#333333" @click="shopVisible = false" />
        </view>
        <view class="popup-section">
          <view class="popup-section_img">
            <view>
              <!-- goodsItem.thumbnail -->
              <image :src="product_id == -1 ? goodsItem.thumbnail : productList[product_index].specsImages"
                mode="aspectFit|aspectFill|widthFix" lazy-load="true" />
            </view>
            <view class="popup-section_img_price">
              ￥<text>{{ product_id == -1 ? goodsItem.showPrice : productList[product_index].showPrice }}</text>
            </view>
          </view>
          <view class="popup-section_specs">
            <view class="popup-section_specs_title"> 规格 </view>
            <block v-for="(item, index) in productList" :key="index">
              <view v-if="item.stock > 0" class="popup-section_specs_item"
                :class="product_id == item.productSpecsId ? 'specs_actived' : ''" @click="onCheckProduct(item, index)">
                {{ item.name }}
              </view>
              <view v-else class="popup-section_specs_item noStock">
                {{ item.name }} <text>缺货</text>
              </view>
            </block>
            <view class="popup-section_specs_number">
              <view>数量</view>
              <view class="algorithm">
                <view @click="cartChange('minus', goodsItem)">
                  <u-icon icon="minus" size="30rpx" color="#999" />
                </view>
                <view> {{ number }} </view>
                <view @click="cartChange('plus', goodsItem)">
                  <u-icon icon="plus" size="30rpx" color="#32B499" />
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="popup_container-btn">
          <view @click="addCart(goodsItem)">加入购物车</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>
<script>
import { getUserInfo } from '@/common/auth';
import filterSearch from "@/components/filter";
import { arrayUnique } from '@/utils/util';

export default {
  components: {
    filterSearch
  },
  data() {
    return {
      userId: getUserInfo().ypdUser?.userId,
      goodsList: [],
      keywords: '',
      pageNum: 1,
      pageSize: 15,
      total: 0,
      overall: 0,
      sorts: '',
      type: 1,
      shopVisible: false,
      goodsItem: {},
      number: 1,
      product_id: -1,
      product_index: 0,
      productList: [],
      dataList: []
    }
  },
  onLoad(options) {
    const { searchValue = '', type, storeId } = options || {};
    this.keywords = searchValue
    this.type = type
    this.storeId = storeId
  },
  onShow() {
    this.$nextTick(() => {
      this.$refs.paging.reload();
    })
  },
  methods: {
    //切换筛选
    handleFilterChange(e) {
      console.log(e)
      const { overall, sorts } = e;
      this.sorts = sorts
      this.overall = overall
      this.$refs.paging.reload();
    },
    //商品规格弹窗显示
    onShopVisibleShow(item) {
      item.number = 1;
      const { storeId } = this;
      const param = { productId: item.id, storeId };
      this.$request.miniProductSpecs(param).then(res => {
        this.shopVisible = true
        this.goodsItem = item
        this.productList = res.data
        this.number = 1
        this.product_id = res.data[0].productSpecsId
      });
    },
    //选择规格
    onCheckProduct(product, index) {
      this.product_id = product
      this.product_index = index
    },
    //选择商品 加加减减
    cartChange(type, item) {
      let { number, goodsItem } = this;
      let num = number;
      if (goodsItem.id == item.id) {
        if (type == 'minus') {
          if (num > 1) {
            num--;
          }
        } else {
          num++
        }
        goodsItem.number = num;
        this.number = num
        this.goodsItem = goodsItem
      }
    },
    //加入购物车
    addCart(item) {
      const cartList = wx.getStorageSync('cartList');
      const { product_index, product_id, productList } = this;
      item.showPrice = productList[product_index].showPrice;
      item.product_id = product_id;
      item.thumbnail = productList[product_index].specsImages;
      if (product_id == -1) {
        showToast('请选择规格!');
      } else {
        if (cartList.length != 0) {
          console.log(cartList, 'cartList')
          cartList.map(ite => {
            if (ite == null) return
            if (ite.id == item.id && ite.product_id == item.product_id) {
              ite.number += item.number;
            } else {
              cartList.push(item);
            }
          });
        } else {
          cartList.push(item);
        }
        this.$toast('加入购物车成功!');
        uni.setStorageSync('cartList', cartList);
        this.shopVisible = false
        this.product_id = -1
      }
    },
    async queryList(pageNo, pageSize) {
      uni.showLoading({ title: '加载中...' });
      const { keywords, userId, overall, sorts, storeId, type } = this;
      const params = {
        page: {
          size: pageSize,
          current: pageNo
        },
        query: {
          orderBy: overall == 0 ? 0 : sorts == 'desc' ? 3 : 2, // 0 综合，1 价格 2 价格升序 3 价格降序
          name: keywords,
          userId,
          storeId
        },
      };
      if (type == 1) delete params.query.storeId;
      let result = await this.$request.miniFindByPage(params)
      uni.hideLoading();
      this.$refs.paging.complete(result.data.records);
    },
    handleClear() {
      this.keywords = ''
      this.$refs.paging.reload();
    },

    handleSubmit(e) {
      this.goodsList = []
      this.loadMoreStatus = 0
      this.keywords = e
      this.$refs.paging.reload();
    },
    onCollect(item) {
      const { userId } = this;
      if (!userId) return this.$toast('您还未登录,请先去登录!')

      const param = {
        productUpId: item.id,
        userId
      }
      if (item.collect == 0 || item.collect == null) {
        this.$request.miniAddCollet(param).then(res => {
          if (res.code == 200) {
            this.$toast('收藏成功!')
          }
        });
      } else {
        this.$request.miniCancelCollet(param).then(res => {
          if (res.code == 200) {
            this.$toast('取消收藏成功!')
          }
        });
      }
      setTimeout(() => {
        this.$refs.paging.reload();
      }, 500)
    },

  },

}
</script>
<style scoped>
page {
  background-color: #fff;
}

.result-container {
  display: block;
  /* height: 100%; */
  background-color: #fff;
  display: flex;
  flex-direction: column;
}


.result-container .t-search {
  padding: 0 30rpx;
}

.result-container .t-class__input-container {
  height: 64rpx !important;
  border-radius: 32rpx !important;
}

.result-container .t-search__left-icon {
  display: flex;
  align-items: center;
}

.result-container .t-search__input {
  font-size: 28rpx !important;
  color: #333 !important;
}

.result-container .category-goods-list {
  flex: 1;
  overflow-y: scroll;
  padding: 20rpx 24rpx;
  -webkit-overflow-scrolling: touch;
}

.category-goods-list::-webkit-scrollbar {
  width: 0;
}

.result-container .wr-goods-list {
  background: #f2f2f2 !important;
}

.result-container .t-image__mask {
  display: flex !important;
}

.result-container .empty-wrap {
  margin-top: 184rpx;
  margin-bottom: 120rpx;
  height: 300rpx;
}

.result-container .empty-wrap .empty-tips .empty-content .content-text {
  margin-top: 40rpx;
}

.result-container .price-container {
  padding: 32rpx;
  height: 100vh;
  max-width: 632rpx;
  background-color: #fff;
  border-radius: 30rpx 0 0 30rpx;
}

.result-container .price-between {
  font-size: 26rpx;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
}

.result-container .price-ipts-wrap {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-top: 24rpx;
}

.result-container .price-ipts-wrap .price-divided {
  position: relative;
  width: 22rpx;
  margin: 0 20rpx;
  color: #222427;
}

.result-container .price-ipts-wrap .price-ipt {
  box-sizing: border-box;
  width: 246rpx;
  font-size: 24rpx;
  height: 56rpx;
  padding: 0 24rpx;
  text-align: center;
  border-radius: 8rpx;
  color: #333;
  background: rgba(245, 245, 245, 1);
}

.t-class-input {
  font-size: 24rpx !important;
}

.t-search__clear {
  font-size: 40rpx !important;
}

.result-container .price-ipts-wrap .price-ipt::after {
  border: none !important;
}

.result-container .t-input__control {
  font-size: 24rpx !important;
  text-align: center;
}

.goods-card {
  height: 200rpx;
  background-color: #fff;
  box-sizing: border-box;
  font-size: 24rpx;
  border-radius: 16rpx;
  margin-bottom: 24rpx;
}

.goods-card__main {
  height: 100%;
  display: flex;
  border-radius: 16rpx;
  /* flex-direction: column; */
}

.goods-card__thumb {
  position: relative;
  width: 200rpx;
  height: 200rpx;
  border-radius: 16rpx;

}

.goods-card__thumb:empty {
  display: none;
  margin: 0;
  border-radius: 16rpx;
}

.goods-card__img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 8rpx 8rpx !important;
  overflow: hidden;
}

.goods-card__body {
  height: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 10rpx 24rpx 10rpx;
}

.goods-card__upper {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex: 1 1 auto;
}

.goods-card__title {
  flex-shrink: 0;
  font-size: 28rpx;
  color: #333;
  font-weight: 400;
  display: -webkit-box;
  height: 72rpx;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  word-break: break-word;
  line-height: 36rpx;
}

.goods-card__tags {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 8rpx 0 0 0;
}

.goods-card__tag {
  color: #fa4126;
  background: transparent;
  font-size: 20rpx;
  font-family: PingFang SC-Regular, PingFang SC;
  border: 1rpx solid #FF6F40;
  padding: 0 8rpx;
  border-radius: 4rpx;
  line-height: 30rpx;
  margin: 0 8rpx 8rpx 0;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  word-break: keep-all;
  text-overflow: ellipsis;
}

.goods-card__down {
  display: flex;
  position: relative;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  line-height: 32rpx;
  margin: 8rpx 0 0 0;
}

.goods-card__down>view {
  color: #EA5F5F;
  font-size: 28rpx;
}

.goods-card__down>view>text {
  font-size: 40rpx;
}

.goods-card__down>image {
  width: 32rpx;
  height: 28rpx;
  display: block;
}

.goods-card__down .goods-card__down_icon {
  width: 52rpx;
  height: 52rpx;
  background: #32B499;
  border-radius: 50% 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-right: 5rpx;
}

.goods-card__origin-price {
  white-space: nowrap;
  order: 2;
  color: #EA5F5F;
  font-size: 24rpx;
  margin: 0 0 0 8rpx;
}

.goods-card__add-cart {
  order: 3;
  margin: auto 0 0 auto;
  position: absolute;
  bottom: 0;
  right: 0;
}

.spec-for-price {
  font-size: 40rpx;
  white-space: nowrap;
  font-weight: 700;
  order: 1;
  color: #EA5F5F;
  margin: 0;
}

.spec-for-symbol {
  font-size: 28rpx;
}

.t-empty__image {
  width: 260rpx !important;
  height: 260rpx !important;
}

.popup-block {
  width: 100vw;
  background: #fff;
  border-radius: 32rpx 32rpx 0 0 !important;
  position: relative;
  padding-bottom: 80rpx;
}

.popup-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 24rpx 24rpx 0;
}

.popup-section {
  padding: 0 24rpx;
}

.popup-section_img {
  display: flex;
  align-items: flex-end;
}

.popup-section_img>view:first-child {
  width: 128rpx;
  height: 128rpx;
  border-radius: 8rpx 8rpx 8rpx 8rpx;
  margin-right: 20rpx;
}

.popup-section_img image {
  width: 100%;
  height: 100%;
  display: block;
}

.popup-section_img_price {
  color: #EA5F5F;
  font-size: 28rpx;
}

.popup-section_img_price text {
  font-size: 48rpx;
  font-weight: bold;
}

.popup-section_specs {
  width: 100%;
  margin-top: 30rpx;
}

.popup-section_specs_title {
  font-size: 28rpx;
  color: #333333;
}

.t-row {
  margin-top: 24rpx;
}

.popup-section_specs_item {
  width: max-content;
  height: 56rpx;
  margin-right: 24rpx;
  background-clip: content-box;
  color: #666;
  font-size: 28rpx;
  line-height: 96rpx;
  margin-bottom: 32rpx;
  border-radius: 16rpx 16rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  word-break: keep-all;
  text-overflow: ellipsis;
  padding: 0 24rpx;
  box-sizing: border-box;
}

.specs_actived {
  border: 2rpx solid #32B499;
  background-color: #fff;
}

.popup_container-btn {
  width: 100%;
  position: absolute;
  bottom: 0rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup_container-btn>view {
  width: 600rpx;
  height: 66rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  border-radius: 60rpx 60rpx;
  background-color: #32B499;
}

.popup-section_specs_number {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 24rpx;
  color: #333;
}

.popup-section_specs_number>view {
  display: flex;
  align-items: center;
}

.algorithm {
  width: 190rpx;
  height: 50rpx;
  border-radius: 8rpx 8rpx 8rpx 8rpx;
  border: 1rpx solid #999999;
  margin-left: 24rpx;
}

.algorithm>view {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.algorithm>view:first-child,
.algorithm>view:last-child {
  width: 50rpx;
}

.algorithm>view:nth-child(2) {
  flex: 1;
  border-left: 1rpx solid #999999;
  border-right: 1rpx solid #999999;
}
</style>